<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>设备详情 - 御物联</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root{
            --primary:#409EFF;
            --stage-bg:#EDE3D3; /* 全屏舞台背景（如截图外层米色） */
            --bg:#F5F7FA;      /* 页面内部背景（卡片外层浅灰） */
            --text:#303133;
            --subtext:#909399;
            --card:#FFFFFF;
            --border:#EBEEF5;
            --ok:#67C23A;
            --warn:#E6A23C;
            --danger:#F56C6C;
        }
        body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--stage-bg); color:var(--text); }

        /* 页面容器，限制移动端阅读宽度并居中 */
        .page{ min-height:100vh; padding-bottom:calc(72px + env(safe-area-inset-bottom)); max-width:480px; margin:0 auto; background:var(--bg); }

        /* 页头样式 */
        .header-box{ position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border); box-shadow:0 -2px 8px rgba(0,0,0,.04); padding:0; display:flex; flex-direction:column; align-items:stretch; margin:0; border-radius:0; }
        .header-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--card); }
        .header-title{ text-align:center; font-size:16px; font-weight:600; color:var(--primary); line-height:1.4; padding:10px 12px; background:rgba(245,247,250,0.6); }
        .user{ margin-left:auto; padding:0 10px; height:32px; border-radius:16px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; gap:8px; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.03); }

        /* 返回按钮 */
        .back-btn{ display:flex; align-items:center; gap:6px; padding:0; color:var(--text); text-decoration:none; font-size:14px; height:32px; }
        .back-btn:hover{ color:var(--primary); }
        .back-icon{ font-size:16px; }

        /* 设备名称 */
        .device-title{ padding:16px 12px 8px; font-size:20px; font-weight:600; color:var(--primary); }

        /* 设备信息卡片 */
        .device-info{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 12px 16px; }
        .info-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.03); }
        .info-label{ font-size:12px; color:var(--subtext); margin-bottom:8px; }
        .info-value{ font-size:18px; font-weight:600; color:var(--text); }
        .info-value.status-normal{ color:var(--ok); }
        .info-value.status-warning{ color:var(--warn); }
        .info-value.status-danger{ color:var(--danger); }

        /* 设备参数区域 */
        .parameter-section{ padding:0 12px 16px; }
        .parameter-header{ display:flex; align-items:center; margin-bottom:12px; }
        .parameter-line{ flex:1; height:1px; background:var(--border); margin:0 12px; }
        .parameter-title{ font-size:14px; color:var(--text); font-weight:500; }
        
        /* Tab切换样式 */
        .tab-container{ margin:0 0 16px; background:var(--card); border-radius:8px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.03); }
        .tab-header{ display:flex; background:var(--bg); border-bottom:1px solid var(--border); }
        .tab-btn{ flex:1; padding:12px; text-align:center; background:transparent; border:none; color:var(--subtext); font-size:14px; cursor:pointer; transition:all 0.3s ease; }
        .tab-btn.active{ background:var(--card); color:var(--primary); font-weight:600; border-bottom:2px solid var(--primary); }
        .tab-content{ display:none; padding:16px; }
        .tab-content.active{ display:block; }
        
        /* 批量操作按钮 */
        .batch-actions{ margin-bottom:12px; text-align:center; }
        .batch-btn{ background:var(--primary); color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:14px; cursor:pointer; }
        .batch-btn:hover{ background:#66b1ff; }
        
        /* 参数列表样式 */
        .parameter-list{ background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.03); }
        .parameter-item{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
        .parameter-item:last-child{ border-bottom:none; }
        .parameter-checkbox{ width:18px; height:18px; cursor:pointer; }
        .parameter-info{ flex:1; }
        .parameter-name{ font-size:14px; font-weight:500; color:var(--text); margin-bottom:4px; }
        .parameter-value{ font-size:16px; font-weight:600; color:var(--primary); margin-bottom:2px; }
        .parameter-time{ font-size:12px; color:var(--subtext); }
        .chart-btn{ background:var(--primary); color:#fff; border:none; border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; min-width:32px; height:28px; transition:all .2s; }
        .chart-btn:hover{ background:#66b1ff; transform:translateY(-1px); }
        .chart-btn:active{ transform:translateY(0); }
        
        /* 控制Tab特殊样式 - 显示名称、类型和时间 */
        #controlList .parameter-item .parameter-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        #controlList .parameter-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 0;
        }
        #controlList .parameter-type {
            font-size: 12px;
            color: var(--primary);
            background: rgba(64, 158, 255, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
            width: fit-content;
        }
        #controlList .parameter-time {
            font-size: 12px;
            color: var(--subtext);
        }

        /* 搜索框 */
        .search-container{ position:relative; margin-bottom:16px; }
        .search-input{ width:100%; height:40px; border:1px solid var(--border); border-radius:8px; padding:0 40px 0 12px; font-size:14px; color:var(--text); background:var(--card); }
        .search-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(64,158,255,.2); }
        .search-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--subtext); font-size:16px; }

        /* 因子列表 */
        .factor-list{ background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.03); }
        .factor-item{ padding:16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
        .factor-item:last-child{ border-bottom:none; }
        .factor-info{ flex:1; }
        .factor-name{ font-size:14px; font-weight:500; color:var(--text); margin-bottom:4px; }
        .factor-time{ font-size:12px; color:var(--subtext); }
        .factor-control{ color:var(--primary); font-size:12px; }


        /* 抽屉复用 */
        .drawer-mask{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999; }
        .drawer-mask.open{ opacity:1; pointer-events:auto; }
        .drawer{ position:fixed; top:0; right:0; height:100vh; width:86vw; max-width:420px; background:var(--card); border-left:1px solid var(--border); box-shadow:-12px 0 24px rgba(0,0,0,.12); transform:translateX(100%); transition:transform .25s ease; z-index:1000; display:flex; flex-direction:column; }
        .drawer.open{ transform:translateX(0); }
        .drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:600; }
        .drawer-body{ padding:0 14px 14px; color:var(--subtext); font-size:14px; overflow:auto; }
        .drawer-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); color:var(--text); }
        .drawer-row:last-child{ border-bottom:none; }
        .drawer-foot{ display:flex; gap:10px; padding:12px; background:var(--bg); border-top:1px solid var(--border); }
        .btn{ height:40px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); font-size:14px; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; }
        .btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
        .btn-success{ background:var(--ok); color:#fff; border-color:var(--ok); }
        .btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
        .btn:hover{ opacity:0.8; }
        .btn:disabled{ opacity:0.5; cursor:not-allowed; }

        /* 控制面板弹框样式 */
        .control-modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999; }
        .control-modal-mask.open{ opacity:1; pointer-events:auto; }
        .control-modal-dialog{ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9); background:var(--card); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); transition:transform .25s ease; z-index:1000; min-width:320px; max-width:400px; width:90vw; }
        .control-modal-mask.open .control-modal-dialog{ transform:translate(-50%, -50%) scale(1); }
        .control-modal-header{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; }
        .control-modal-title{ font-size:18px; font-weight:600; color:var(--text); }
        .control-modal-close{ width:24px; height:24px; border:none; background:none; font-size:20px; color:var(--subtext); cursor:pointer; }
        .control-modal-body{ padding:20px; }
        .control-modal-footer{ padding:0 20px 20px; display:flex; gap:12px; }

        /* 开关类样式 */
        .switch-controls{ display:flex; gap:16px; justify-content:center; margin:20px 0; }
        .switch-btn{ flex:1; height:50px; border-radius:8px; font-size:16px; font-weight:600; }

        /* 空调类样式 */
        .aircon-controls{ margin:20px 0; }
        .aircon-power{ display:flex; gap:16px; justify-content:center; margin-bottom:20px; }
        .aircon-power .btn{ flex:1; height:50px; font-size:16px; font-weight:600; }
        .aircon-temp{ text-align:center; }
        .temp-label{ font-size:14px; color:var(--subtext); margin-bottom:12px; }
        .temp-controls{ display:flex; align-items:center; gap:16px; justify-content:center; }
        .temp-btn{ width:40px; height:40px; border-radius:50%; font-size:20px; font-weight:bold; }
        .temp-display{ font-size:24px; font-weight:600; color:var(--primary); min-width:60px; }
        .temp-mode{ margin-top:16px; }
        .mode-buttons{ display:flex; gap:8px; justify-content:center; }
        .mode-btn{ padding:8px 16px; border-radius:20px; font-size:14px; }

        /* 进度条样式 */
        .progress-control{ margin:20px 0; }
        .progress-label{ font-size:14px; color:var(--subtext); margin-bottom:12px; text-align:center; }
        .progress-container{ position:relative; height:8px; background:var(--border); border-radius:4px; margin:20px 0; }
        .progress-bar{ height:100%; background:var(--primary); border-radius:4px; transition:width 0.3s ease; }
        .progress-handle{ position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; background:var(--primary); border:3px solid #fff; border-radius:50%; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); }
        .progress-value{ text-align:center; font-size:18px; font-weight:600; color:var(--primary); margin-top:12px; }
    </style>
</head>
<body>
    <div class="page">
        <!-- 白色吸顶框包含用户信息（两行：第一行返回+用户，第二行标题居中） -->
        <div class="header-box">
            <div class="header-top">
                <a href="device-list.html" class="back-btn">
                    <span class="back-icon">←</span>
                    <span>返回系统设备列表</span>
                </a>
                <button class="user" id="userBtn" type="button" title="查看个人信息">
                    <span class="user-avatar" id="userAvatar">U</span>
                    <span id="userName">用户</span>
                </button>
            </div>
            <div class="header-title" id="deviceName">供暖</div>
        </div>

        <!-- 设备信息卡片 -->
        <div class="device-info">
            <div class="info-card">
                <div class="info-label">编号</div>
                <div class="info-value" id="deviceNumber">10</div>
            </div>
            <div class="info-card">
                <div class="info-label">位置</div>
                <div class="info-value" id="deviceLocation">11</div>
            </div>
            <div class="info-card">
                <div class="info-label">项目</div>
                <div class="info-value" id="deviceProject">物联网内部测试系统</div>
            </div>
            <div class="info-card">
                <div class="info-label">状态</div>
                <div class="info-value status-normal" id="deviceStatus">正常</div>
            </div>
        </div>

        <!-- 设备参数区域 -->
        <div class="parameter-section">
            <div class="parameter-header">
                <div class="parameter-line"></div>
                <div class="parameter-title">设备参数</div>
                <div class="parameter-line"></div>
            </div>
            

            <!-- Tab切换容器 -->
            <div class="tab-container">
                <div class="tab-header">
                    <button class="tab-btn active" data-tab="data">数据</button>
                    <button class="tab-btn" data-tab="control">控制</button>
                </div>
                
                <!-- 数据Tab -->
                <div class="tab-content active" id="data-tab">
                    <!-- 参数名称搜索框 -->
                    <div class="search-container">
                        <input type="text" class="search-input" id="dataParameterSearch" placeholder="请输入参数名称">
                        <span class="search-icon">🔍</span>
                    </div>
                    
                    <!-- 批量操作按钮 -->
                    <div class="batch-actions">
                        <button class="batch-btn" id="collectDataBtn">下发采集命令</button>
                    </div>
                    
                    <!-- 数据列表 -->
                    <div class="parameter-list" id="dataList">
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">门磁开关</div>
                                <div class="parameter-value">打开</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:23:45</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">温度</div>
                                <div class="parameter-value">39.8°C</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:22:30</div>
                            </div>
                            <button class="chart-btn" data-sensor="温度" data-type="temperature">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">湿度</div>
                                <div class="parameter-value">20%</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:21:15</div>
                            </div>
                            <button class="chart-btn" data-sensor="湿度" data-type="humidity">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">光照强度</div>
                                <div class="parameter-value">850 lux</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:20:45</div>
                            </div>
                            <button class="chart-btn" data-sensor="光照强度" data-type="light">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">空气质量</div>
                                <div class="parameter-value">良好</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:19:20</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">水压</div>
                                <div class="parameter-value">0.5 MPa</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:18:10</div>
                            </div>
                            <button class="chart-btn" data-sensor="水压" data-type="pressure">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">电流</div>
                                <div class="parameter-value">2.3 A</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:17:35</div>
                            </div>
                            <button class="chart-btn" data-sensor="电流" data-type="current">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">电压</div>
                                <div class="parameter-value">220 V</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:16:50</div>
                            </div>
                            <button class="chart-btn" data-sensor="电压" data-type="voltage">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">功率</div>
                                <div class="parameter-value">500 W</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:15:25</div>
                            </div>
                            <button class="chart-btn" data-sensor="功率" data-type="power">📊</button>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="data">
                            <div class="parameter-info">
                                <div class="parameter-name">噪声</div>
                                <div class="parameter-value">30 dB</div>
                                <div class="parameter-time">更新时间：2025-10-24 16:14:40</div>
                            </div>
                            <button class="chart-btn" data-sensor="噪声" data-type="noise">📊</button>
                        </div>
                    </div>
                </div>
                
                <!-- 控制Tab -->
                <div class="tab-content" id="control-tab">
                    <!-- 控制器名称搜索框 -->
                    <div class="search-container">
                        <input type="text" class="search-input" id="controlParameterSearch" placeholder="请输入控制器名称">
                        <span class="search-icon">🔍</span>
                    </div>
                    
                    <!-- 批量操作按钮 -->
                    <div class="batch-actions">
                        <button class="batch-btn" id="controlDataBtn">下发控制命令</button>
                    </div>
                    
                    <!-- 控制列表 -->
                    <div class="parameter-list" id="controlList">
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="switch">
                            <div class="parameter-info">
                                <div class="parameter-name">照明开关</div>
                                <div class="parameter-type">开关类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:23:45</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="aircon">
                            <div class="parameter-info">
                                <div class="parameter-name">空调温度控制器</div>
                                <div class="parameter-type">空调类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:22:30</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="brightness">
                            <div class="parameter-info">
                                <div class="parameter-name">亮度控制</div>
                                <div class="parameter-type">亮度类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:21:15</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="switch">
                            <div class="parameter-info">
                                <div class="parameter-name">风扇开关</div>
                                <div class="parameter-type">开关类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:20:45</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="opening">
                            <div class="parameter-info">
                                <div class="parameter-name">窗帘控制</div>
                                <div class="parameter-type">开度类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:19:20</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="switch">
                            <div class="parameter-info">
                                <div class="parameter-name">水泵控制</div>
                                <div class="parameter-type">开关类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:18:10</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="aircon">
                            <div class="parameter-info">
                                <div class="parameter-name">加热器控制</div>
                                <div class="parameter-type">空调类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:17:35</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="opening">
                            <div class="parameter-info">
                                <div class="parameter-name">通风控制</div>
                                <div class="parameter-type">开度类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:16:50</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="switch">
                            <div class="parameter-info">
                                <div class="parameter-name">门锁控制</div>
                                <div class="parameter-type">开关类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:15:25</div>
                            </div>
                        </div>
                        <div class="parameter-item">
                            <input type="checkbox" class="parameter-checkbox" data-type="control" data-control-type="switch">
                            <div class="parameter-info">
                                <div class="parameter-name">报警器控制</div>
                                <div class="parameter-type">开关类</div>
                                <div class="parameter-time">上次下发命令：2025-10-24 16:14:40</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 个人信息抽屉 -->
    <div class="drawer-mask" id="drawerMask"></div>
    <aside class="drawer" id="userDrawer" aria-label="个人信息">
        <div class="drawer-header">
            <span>个人信息</span>
        </div>
        <div class="drawer-body">
            <div class="drawer-row" style="padding:20px 0 12px; text-align:center;">
                <button id="userInfoBtn" class="btn btn-primary" style="width:100%; height:48px; font-size:16px;">查看个人信息</button>
            </div>
            <div class="drawer-row" style="border-bottom:none; padding:12px 0 20px; text-align:center;">
                <button id="controlPanelBtn" class="btn" style="width:100%; height:48px; font-size:16px; background:var(--ok); color:#fff; border-color:var(--ok);">操作面板展示</button>
            </div>
        </div>
        <div class="drawer-foot">
            <button id="logoutBtn" class="btn-danger" style="flex:1;">退出登录</button>
            <button id="closePanel" class="btn" style="flex:1;">关闭</button>
        </div>
    </aside>

    <!-- 控制面板弹框 -->
    <div class="control-modal-mask" id="controlModal">
        <div class="control-modal-dialog">
            <div class="control-modal-header">
                <div class="control-modal-title" id="controlModalTitle">控制面板</div>
                <button class="control-modal-close" onclick="closeControlModal()">×</button>
            </div>
            <div class="control-modal-body" id="controlModalBody">
                <!-- 动态内容将在这里插入 -->
            </div>
            <div class="control-modal-footer">
                <button class="btn" onclick="closeControlModal()" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmControl()" style="flex:1;">确认</button>
            </div>
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化用户信息显示
            (function initUser(){
                try {
                    const userStr = localStorage.getItem('currentUser');
                    const user = userStr ? JSON.parse(userStr) : null;
                    const nameEl = document.getElementById('userName');
                    const avatarEl = document.getElementById('userAvatar');
                    if(user && nameEl && avatarEl){
                        nameEl.textContent = user.name || '用户';
                        avatarEl.textContent = (user.name || 'U').slice(0,1);
                        // 填充弹窗信息
                        const accountEl = document.getElementById('infoAccount');
                        const roleEl = document.getElementById('infoRole');
                        const phoneEl = document.getElementById('infoPhone');
                        if(accountEl) accountEl.textContent = user.account || '-';
                        if(roleEl) roleEl.textContent = user.role || '-';
                        if(phoneEl) phoneEl.textContent = user.phone || '-';
                    }
                } catch(e){
                    console.error('初始化用户信息时出错:', e);
                }
            })();

            // 右侧抽屉交互
            const drawer = document.getElementById('userDrawer');
            const mask = document.getElementById('drawerMask');
            const userBtn = document.getElementById('userBtn');
            const closePanel = document.getElementById('closePanel');
            const logoutBtn = document.getElementById('logoutBtn');
            const userInfoBtn = document.getElementById('userInfoBtn');
            const controlPanelBtn = document.getElementById('controlPanelBtn');
            
            if (!drawer || !mask || !userBtn || !closePanel || !logoutBtn || !userInfoBtn || !controlPanelBtn) {
                console.error('缺少必要的DOM元素');
                return;
            }
            
            function openDrawer(){ drawer.classList.add('open'); mask.classList.add('open'); }
            function closeDrawer(){ drawer.classList.remove('open'); mask.classList.remove('open'); }
            
            userBtn.addEventListener('click', openDrawer);
            closePanel.addEventListener('click', closeDrawer);
            mask.addEventListener('click', closeDrawer);
            userInfoBtn.addEventListener('click', () => {
                closeDrawer();
                window.location.href = 'user-info.html';
            });
            controlPanelBtn.addEventListener('click', () => {
                closeDrawer();
                window.location.href = 'control-panel-demo.html';
            });
            logoutBtn.addEventListener('click', () => {
                localStorage.removeItem('currentUser');
                window.location.href = 'mobile-login-demo.html';
            });
            
            // Esc 关闭
            document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeDrawer(); });

            // 数据参数搜索功能
            const dataParameterSearch = document.getElementById('dataParameterSearch');
            if (dataParameterSearch) {
                dataParameterSearch.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const dataItems = document.querySelectorAll('#dataList .parameter-item');
                    
                    dataItems.forEach(item => {
                        const parameterName = item.querySelector('.parameter-name').textContent.toLowerCase();
                        if (parameterName.includes(searchTerm)) {
                            item.style.display = 'flex';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            }
            
            // 控制器搜索功能
            const controlParameterSearch = document.getElementById('controlParameterSearch');
            if (controlParameterSearch) {
                controlParameterSearch.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const controlItems = document.querySelectorAll('#controlList .parameter-item');
                    
                    controlItems.forEach(item => {
                        const parameterName = item.querySelector('.parameter-name').textContent.toLowerCase();
                        if (parameterName.includes(searchTerm)) {
                            item.style.display = 'flex';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            }
            
            // 图表按钮事件
            document.querySelectorAll('.chart-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sensorName = this.getAttribute('data-sensor');
                    const sensorType = this.getAttribute('data-type');
                    const deviceName = document.getElementById('deviceName').textContent;
                    
                    // 跳转到图表页面
                    const url = `data-chart.html?device=${encodeURIComponent(deviceName)}&sensor=${encodeURIComponent(sensorName)}&type=${sensorType}`;
                    window.location.href = url;
                });
            });
            
            // Tab切换功能
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 移除所有active类
                    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                    
                    // 添加active类到当前tab
                    this.classList.add('active');
                    document.getElementById(tabId + '-tab').classList.add('active');
                });
            });


            // 批量采集命令
            const collectDataBtn = document.getElementById('collectDataBtn');
            if (collectDataBtn) {
                collectDataBtn.addEventListener('click', function() {
                    // 检查设备是否被禁用
                    if (this.disabled) {
                        alert('设备已禁用，无法下发命令！');
                        return;
                    }
                    
                    const checkedItems = document.querySelectorAll('#dataList .parameter-checkbox:checked');
                    if (checkedItems.length === 0) {
                        alert('请先选择要采集的数据参数！');
                        return;
                    }
                    
                    const selectedParams = Array.from(checkedItems).map(checkbox => {
                        return checkbox.parentElement.querySelector('.parameter-name').textContent;
                    });
                    
                    alert(`正在下发采集命令，选中的参数：\n${selectedParams.join('\n')}`);
                });
            }
            
            // 批量控制命令
            const controlDataBtn = document.getElementById('controlDataBtn');
            if (controlDataBtn) {
                controlDataBtn.addEventListener('click', function() {
                    // 检查设备是否被禁用
                    if (this.disabled) {
                        alert('设备已禁用，无法下发命令！');
                        return;
                    }
                    
                    const checkedItems = document.querySelectorAll('#controlList .parameter-checkbox:checked');
                    if (checkedItems.length === 0) {
                        alert('请先选择要控制的参数！');
                        return;
                    }
                    
                    // 检查控制类型是否一致
                    const controlTypes = Array.from(checkedItems).map(checkbox => {
                        return checkbox.getAttribute('data-control-type');
                    });
                    
                    const uniqueTypes = [...new Set(controlTypes)];
                    if (uniqueTypes.length > 1) {
                        const typeNames = {
                            'switch': '开关类',
                            'aircon': '红外遥控器控制面板', 
                            'brightness': '亮度类',
                            'opening': '开度类'
                        };
                        const selectedTypeNames = uniqueTypes.map(type => typeNames[type] || type);
                        alert(`批量控制时不允许选择不同类型的控制器！\n当前选择了：${selectedTypeNames.join('、')}\n请选择相同类型的控制器进行批量操作。`);
                        return;
                    }
                    
                    // 获取选中的控制器信息
                    const selectedControllers = Array.from(checkedItems).map(checkbox => {
                        const name = checkbox.parentElement.querySelector('.parameter-name').textContent;
                        const type = checkbox.parentElement.querySelector('.parameter-type').textContent;
                        return { name, type, element: checkbox };
                    });
                    
                    // 根据控制类型打开对应的控制面板
                    const controlType = uniqueTypes[0];
                    openControlPanel(controlType, selectedControllers);
                });
            }
            
            // 全选/取消全选功能
            function setupSelectAll() {
                // 为每个tab添加全选功能
                const tabs = ['data', 'control'];
                tabs.forEach(tab => {
                    const tabContent = document.getElementById(tab + '-tab');
                    if (tabContent) {
                        const checkboxes = tabContent.querySelectorAll('.parameter-checkbox');
                        const batchBtn = tabContent.querySelector('.batch-btn');
                        
                        if (checkboxes.length > 0 && batchBtn) {
                            // 添加全选按钮
                            const selectAllBtn = document.createElement('button');
                            selectAllBtn.className = 'batch-btn';
                            selectAllBtn.style.marginRight = '8px';
                            selectAllBtn.textContent = '全选';
                            selectAllBtn.addEventListener('click', function() {
                                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                                checkboxes.forEach(cb => cb.checked = !allChecked);
                                this.textContent = allChecked ? '全选' : '取消全选';
                            });
                            
                            batchBtn.parentElement.insertBefore(selectAllBtn, batchBtn);
                        }
                    }
                });
            }
            
            // 初始化全选功能
            setupSelectAll();
            
            // 智能选择功能 - 当选择某个类型的控制器时，提示同类型选项
            function setupSmartSelection() {
                const controlCheckboxes = document.querySelectorAll('#controlList .parameter-checkbox');
                
                controlCheckboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        if (this.checked) {
                            const currentType = this.getAttribute('data-control-type');
                            const typeNames = {
                                'switch': '开关类',
                                'aircon': '红外遥控器控制面板', 
                                'brightness': '亮度类',
                                'opening': '开度类'
                            };
                            const currentTypeName = typeNames[currentType] || currentType;
                            
                            // 查找同类型的其他控制器
                            const sameTypeCheckboxes = Array.from(controlCheckboxes).filter(cb => 
                                cb.getAttribute('data-control-type') === currentType && !cb.checked
                            );
                            
                            if (sameTypeCheckboxes.length > 0) {
                                const sameTypeNames = sameTypeCheckboxes.map(cb => 
                                    cb.parentElement.querySelector('.parameter-name').textContent
                                );
                                
                                // 显示提示信息
                                const message = `已选择${currentTypeName}控制器。\n同类型可选控制器：\n${sameTypeNames.join('\n')}\n\n提示：批量控制时只能选择相同类型的控制器。`;
                                
                                // 创建提示框
                                const existingTip = document.getElementById('type-tip');
                                if (existingTip) {
                                    existingTip.remove();
                                }
                                
                                const tip = document.createElement('div');
                                tip.id = 'type-tip';
                                tip.style.cssText = `
                                    position: fixed;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    background: var(--card);
                                    border: 1px solid var(--border);
                                    border-radius: 8px;
                                    padding: 16px;
                                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                                    z-index: 1000;
                                    max-width: 300px;
                                    font-size: 14px;
                                    line-height: 1.4;
                                `;
                                tip.innerHTML = `
                                    <div style="margin-bottom: 12px; font-weight: 600; color: var(--primary);">${currentTypeName}控制器选择提示</div>
                                    <div style="margin-bottom: 12px; white-space: pre-line;">${message}</div>
                                    <button onclick="this.parentElement.remove()" style="
                                        background: var(--primary);
                                        color: white;
                                        border: none;
                                        border-radius: 4px;
                                        padding: 8px 16px;
                                        cursor: pointer;
                                        width: 100%;
                                    ">知道了</button>
                                `;
                                
                                document.body.appendChild(tip);
                                
                                // 3秒后自动消失
                                setTimeout(() => {
                                    if (tip && tip.parentElement) {
                                        tip.remove();
                                    }
                                }, 5000);
                            }
                        }
                    });
                });
            }
            
            // 初始化智能选择功能
            setupSmartSelection();

            // 从localStorage获取设备信息
            function loadDeviceInfo() {
            try {
                // 从localStorage读取设备信息
                const deviceInfoStr = localStorage.getItem('selectedDevice');
                if (deviceInfoStr) {
                    const deviceInfo = JSON.parse(deviceInfoStr);
                    const deviceId = deviceInfo.id;
                    const deviceName = deviceInfo.name;
                    
                    console.log('从localStorage读取设备信息 - ID:', deviceId, 'Name:', deviceName);
                    
                    // 设置设备名称
                    if (deviceName) {
                        document.getElementById('deviceName').textContent = deviceName;
                        console.log('设置设备名称:', deviceName);
                    }
                    
                    // 根据设备ID设置设备信息
                    if (deviceId) {
                        const deviceData = getDeviceData(deviceId);
                        if (deviceData) {
                            document.getElementById('deviceNumber').textContent = deviceData.number;
                            document.getElementById('deviceLocation').textContent = deviceData.location;
                            document.getElementById('deviceProject').textContent = deviceData.project;
                            document.getElementById('deviceStatus').textContent = deviceData.status;
                            document.getElementById('deviceStatus').className = `info-value status-${deviceData.statusClass}`;
                            
                            // 根据设备状态禁用/启用下发命令按钮
                            updateCommandButtons(deviceData.statusClass === 'danger');
                        }
                    }
                } else {
                    console.log('未找到设备信息，使用默认数据');
                    // 如果没有找到设备信息，使用默认数据
                    const defaultDevice = getDeviceData('1');
                    if (defaultDevice) {
                        document.getElementById('deviceName').textContent = defaultDevice.name;
                        document.getElementById('deviceNumber').textContent = defaultDevice.number;
                        document.getElementById('deviceLocation').textContent = defaultDevice.location;
                        document.getElementById('deviceProject').textContent = defaultDevice.project;
                        document.getElementById('deviceStatus').textContent = defaultDevice.status;
                        document.getElementById('deviceStatus').className = `info-value status-${defaultDevice.statusClass}`;
                        
                        // 根据设备状态禁用/启用下发命令按钮
                        updateCommandButtons(defaultDevice.statusClass === 'danger');
                    }
                }
            } catch (error) {
                console.error('读取设备信息时出错:', error);
                // 出错时使用默认数据
                const defaultDevice = getDeviceData('1');
                if (defaultDevice) {
                    document.getElementById('deviceName').textContent = defaultDevice.name;
                    // 根据设备状态禁用/启用下发命令按钮
                    updateCommandButtons(defaultDevice.statusClass === 'danger');
                }
            }
        }

        // 更新命令按钮状态
        function updateCommandButtons(isDisabled) {
            const collectDataBtn = document.getElementById('collectDataBtn');
            const controlDataBtn = document.getElementById('controlDataBtn');
            
            if (collectDataBtn) {
                collectDataBtn.disabled = isDisabled;
                collectDataBtn.style.opacity = isDisabled ? '0.5' : '1';
                collectDataBtn.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
                collectDataBtn.textContent = isDisabled ? '设备已禁用' : '下发采集命令';
            }
            
            if (controlDataBtn) {
                controlDataBtn.disabled = isDisabled;
                controlDataBtn.style.opacity = isDisabled ? '0.5' : '1';
                controlDataBtn.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
                controlDataBtn.textContent = isDisabled ? '设备已禁用' : '下发控制命令';
            }
            
            // 禁用所有参数复选框
            const checkboxes = document.querySelectorAll('.parameter-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.disabled = isDisabled;
                checkbox.style.opacity = isDisabled ? '0.5' : '1';
                checkbox.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
            });
            
            // 禁用全选按钮
            const selectAllBtns = document.querySelectorAll('.batch-actions button');
            selectAllBtns.forEach(btn => {
                if (btn.id !== 'collectDataBtn' && btn.id !== 'controlDataBtn') {
                    btn.disabled = isDisabled;
                    btn.style.opacity = isDisabled ? '0.5' : '1';
                    btn.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
                }
            });
        }

        // 模拟设备数据
        function getDeviceData(deviceId) {
            const deviceDataMap = {
                '1': {
                    name: '供暖',
                    number: '10',
                    location: '11',
                    project: '物联网内部测试系统',
                    status: '正常',
                    statusClass: 'normal'
                },
                '2': {
                    name: '插座电源',
                    number: '20',
                    location: '12',
                    project: '物联网内部测试系统',
                    status: '正常',
                    statusClass: 'normal'
                },
                '3': {
                    name: '电动窗帘',
                    number: '30',
                    location: '13',
                    project: '智慧园区示范点',
                    status: '正常',
                    statusClass: 'normal'
                },
                '4': {
                    name: '门禁',
                    number: '40',
                    location: '14',
                    project: '物联网内部测试系统',
                    status: '禁用',
                    statusClass: 'danger'
                },
                '5': {
                    name: '空调开关',
                    number: '50',
                    location: '15',
                    project: '城市水务试点',
                    status: '正常',
                    statusClass: 'normal'
                },
                '6': {
                    name: '4g节点测试',
                    number: '60',
                    location: '16',
                    project: '物联网内部测试系统',
                    status: '正常',
                    statusClass: 'normal'
                }
            };
            
            return deviceDataMap[deviceId] || deviceDataMap['1'];
            }

            // 页面加载时获取设备信息
            loadDeviceInfo();
        });

        // 全局变量存储控制状态
        let currentControlType = null;
        let currentControllers = [];
        let controlState = {};

        // 打开控制面板
        function openControlPanel(controlType, controllers) {
            currentControlType = controlType;
            currentControllers = controllers;
            
            const modal = document.getElementById('controlModal');
            const title = document.getElementById('controlModalTitle');
            const body = document.getElementById('controlModalBody');
            
            // 设置标题
            const typeNames = {
                'switch': '开关类控制',
                'aircon': '红外遥控器控制面板', 
                'brightness': '亮度类控制',
                'opening': '开度类控制'
            };
            title.textContent = typeNames[controlType] || '控制面板';
            
            // 根据控制类型生成对应的控制界面
            let controlHTML = '';
            switch(controlType) {
                case 'switch':
                    controlHTML = generateSwitchControl();
                    break;
                case 'aircon':
                    controlHTML = generateAirconControl();
                    break;
                case 'brightness':
                    controlHTML = generateBrightnessControl();
                    break;
                case 'opening':
                    controlHTML = generateOpeningControl();
                    break;
            }
            
            body.innerHTML = controlHTML;
            modal.classList.add('open');
            
            // 初始化控制状态
            initControlState(controlType);
        }

        // 关闭控制面板
        function closeControlModal() {
            document.getElementById('controlModal').classList.remove('open');
            currentControlType = null;
            currentControllers = [];
            controlState = {};
        }

        // 确认控制操作
        function confirmControl() {
            if (!currentControlType || currentControllers.length === 0) {
                alert('没有选中的控制器！');
                return;
            }
            
            const controllerNames = currentControllers.map(c => c.name).join('、');
            const typeNames = {
                'switch': '开关类',
                'aircon': '红外遥控器控制面板', 
                'brightness': '亮度类',
                'opening': '开度类'
            };
            const typeName = typeNames[currentControlType] || currentControlType;
            
            let commandText = `正在下发${typeName}控制命令：\n控制器：${controllerNames}\n`;
            
            // 根据控制类型添加具体参数
            switch(currentControlType) {
                case 'switch':
                    commandText += `状态：${controlState.switchState || '未选择'}`;
                    break;
                case 'aircon':
                    commandText += `红外遥控器控制面板\n电源：${controlState.power || 'off'}\n温度：${controlState.temp || 25}°C\n模式：${controlState.mode || 'cool'}\n注意：不能获取实时控制数据`;
                    break;
                case 'brightness':
                    commandText += `亮度：${controlState.brightness || 50}%`;
                    break;
                case 'opening':
                    commandText += `开度：${controlState.opening || 0}%`;
                    break;
            }
            
            alert(commandText);
            closeControlModal();
        }

        // 生成开关类控制界面
        function generateSwitchControl() {
            return `
                <div class="switch-controls">
                    <button class="btn btn-success switch-btn" onclick="setSwitchState('on')">打开</button>
                    <button class="btn btn-danger switch-btn" onclick="setSwitchState('off')">关闭</button>
                </div>
                <div style="text-align:center; margin-top:20px;">
                    <div id="switchStatus" style="font-size:16px; color:var(--subtext);">当前状态：未选择</div>
                </div>
            `;
        }

        // 生成空调类控制界面
        function generateAirconControl() {
            return `
                <div style="text-align:center; color:var(--subtext); font-size:12px; margin-bottom:16px; padding:10px; background:rgba(255,193,7,.1); border-radius:8px;">
                    ⚠️ 注意：不能获取实时控制数据
                </div>
                <div class="aircon-controls">
                    <div class="aircon-power">
                        <button class="btn btn-success" onclick="setAirconPower('on')">打开空调</button>
                        <button class="btn btn-danger" onclick="setAirconPower('off')">关闭空调</button>
                    </div>
                    <div class="aircon-temp">
                        <div class="temp-label">温度调节</div>
                        <div class="temp-controls">
                            <button class="btn temp-btn" onclick="changeTemp(-1)">-</button>
                            <div class="temp-display" id="tempDisplay">25°C</div>
                            <button class="btn temp-btn" onclick="changeTemp(1)">+</button>
                        </div>
                        <div class="temp-mode">
                            <div class="mode-buttons">
                                <button class="btn mode-btn" onclick="setTempMode('cool')" id="coolBtn">制冷</button>
                                <button class="btn mode-btn" onclick="setTempMode('heat')" id="heatBtn">制热</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 生成亮度类控制界面
        function generateBrightnessControl() {
            return `
                <div class="progress-control">
                    <div class="progress-label">亮度调节</div>
                    <div class="progress-container" id="brightnessContainer" onclick="setBrightness(event)">
                        <div class="progress-bar" id="brightnessBar" style="width: 50%;"></div>
                        <div class="progress-handle" id="brightnessHandle" style="left: 50%;"></div>
                    </div>
                    <div class="progress-value" id="brightnessValue">50%</div>
                </div>
            `;
        }

        // 生成开度类控制界面
        function generateOpeningControl() {
            return `
                <div class="progress-control">
                    <div class="progress-label">开度调节</div>
                    <div class="progress-container" id="openingContainer" onclick="setOpening(event)">
                        <div class="progress-bar" id="openingBar" style="width: 0%;"></div>
                        <div class="progress-handle" id="openingHandle" style="left: 0%;"></div>
                    </div>
                    <div class="progress-value" id="openingValue">0%</div>
                </div>
            `;
        }

        // 初始化控制状态
        function initControlState(controlType) {
            switch(controlType) {
                case 'switch':
                    controlState.switchState = null;
                    break;
                case 'aircon':
                    controlState = { power: 'off', temp: 25, mode: 'cool' };
                    // 更新UI显示
                    const tempDisplay = document.getElementById('tempDisplay');
                    if (tempDisplay) {
                        tempDisplay.textContent = controlState.temp + '°C';
                    }
                    // 设置默认模式为制冷
                    setTimeout(() => {
                        const coolBtn = document.getElementById('coolBtn');
                        const heatBtn = document.getElementById('heatBtn');
                        if (coolBtn && heatBtn) {
                            coolBtn.classList.add('btn-primary');
                            heatBtn.classList.remove('btn-primary');
                        }
                    }, 100);
                    break;
                case 'brightness':
                    controlState.brightness = 50;
                    break;
                case 'opening':
                    controlState.opening = 0;
                    break;
            }
        }

        // 开关类控制函数
        function setSwitchState(state) {
            controlState.switchState = state;
            const statusEl = document.getElementById('switchStatus');
            if (statusEl) {
                statusEl.textContent = `当前状态：${state === 'on' ? '打开' : '关闭'}`;
                statusEl.style.color = state === 'on' ? 'var(--ok)' : 'var(--danger)';
            }
        }

        // 空调类控制函数
        function setAirconPower(power) {
            controlState.power = power;
            const powerText = power === 'on' ? '打开空调' : '关闭空调';
            alert(`命令已经发出：${powerText}`);
        }

        function changeTemp(delta) {
            controlState.temp = Math.max(16, Math.min(30, controlState.temp + delta));
            const tempDisplay = document.getElementById('tempDisplay');
            if (tempDisplay) {
                tempDisplay.textContent = controlState.temp + '°C';
            }
        }

        function setTempMode(mode) {
            controlState.mode = mode;
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('btn-primary'));
            const targetBtn = document.getElementById(mode + 'Btn');
            if (targetBtn) {
                targetBtn.classList.add('btn-primary');
            }
        }

        // 亮度类控制函数
        function setBrightness(event) {
            const container = document.getElementById('brightnessContainer');
            if (!container) return;
            
            const rect = container.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const percentage = Math.round((x / rect.width) * 100);
            const clampedPercentage = Math.max(0, Math.min(100, percentage));
            
            controlState.brightness = clampedPercentage;
            const bar = document.getElementById('brightnessBar');
            const handle = document.getElementById('brightnessHandle');
            const value = document.getElementById('brightnessValue');
            
            if (bar && handle && value) {
                bar.style.width = clampedPercentage + '%';
                handle.style.left = clampedPercentage + '%';
                value.textContent = clampedPercentage + '%';
            }
        }

        // 开度类控制函数
        function setOpening(event) {
            const container = document.getElementById('openingContainer');
            if (!container) return;
            
            const rect = container.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const percentage = Math.round((x / rect.width) * 100);
            const clampedPercentage = Math.max(0, Math.min(100, percentage));
            
            controlState.opening = clampedPercentage;
            const bar = document.getElementById('openingBar');
            const handle = document.getElementById('openingHandle');
            const value = document.getElementById('openingValue');
            
            if (bar && handle && value) {
                bar.style.width = clampedPercentage + '%';
                handle.style.left = clampedPercentage + '%';
                value.textContent = clampedPercentage + '%';
            }
        }

        // 点击遮罩关闭弹框
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('control-modal-mask')) {
                closeControlModal();
            }
        });
    </script>
</body>
</html>
